<template>
  <div style="height: 97%">
    <div class="head">
      <a-radio-group v-model:value="projectTyep" button-style="solid" @change="init(1)">
        <a-space size="middle">
          <a-radio-button :value="null">所有项目</a-radio-button>
          <a-radio-button :value="1">普通项目</a-radio-button>
          <a-radio-button :value="2">课程项目</a-radio-button>
        </a-space>

        <div style="margin-right: 25px; float: right">
          <a-button type="primary" @click="createProjectModal = true">新增项目</a-button>
        </div>
      </a-radio-group>
    </div>

    <div class="body">
      <!-- 筛选栏 -->
      <a-form
        class="filter"
        ref="formRef"
        :model="formState"
        autocomplete="off"
        :label-col="labelCol"
      >
        <div class="filter-box">
          <div class="filter-options">
            <a-form-item label="项目名称" name="projectName">
              <a-input
                v-model:value="formState.projectName"
                placeholder="输入项目名称"
                allow-clear
              />
            </a-form-item>
            <a-form-item label="项目时间" name="projectDate" allow-clear>
              <a-range-picker v-model:value="formState.projectDate" />
            </a-form-item>
          </div>

          <div class="filter-buttons">
            <a-button type="primary" @click="onSubmit">
              <template #icon> <SearchOutlined /> </template>查询</a-button
            >
            <a-button @click="resetForm">
              <template #icon> <RedoOutlined /> </template>重置</a-button
            >
          </div>
        </div>
      </a-form>
      <!-- 表格 -->
      <ProjectTable :projects="projects" :loading="loading" @refresh="init(current)" />
      <!-- 分页器 -->
      <a-pagination
        v-model:current="current"
        v-model:page-size="pageSizeRef"
        :total="total"
        show-size-changer
        class="pagination"
        @change="init(current)"
      />
    </div>
  </div>

  <CreateProjectModal
    v-model:model-visible="createProjectModal"
    @update:model-visible="createProjectModal = false"
    @confirm="init(current)"
  ></CreateProjectModal>
</template>

<script lang="ts" setup>
import ProjectTable from '@/views/ProjectList/ProjectTable.vue';
import CreateProjectModal from './CreateProjectModal.vue';
import type { FormInstance } from 'ant-design-vue';
import dayjs from 'dayjs';
import ProjectDao from '@/daos/project_dao';
import { useStore } from 'vuex';
import project from '@/store/modules/project';

const store = useStore();
const projectDao = new ProjectDao();
//创建任务窗口状态
const createProjectModal = ref<boolean>(false);

//顶部项目类型选取值
const projectTyep = ref(null);
//分页器
const current = ref(1);
const pageSizeRef = ref(10);
const total = ref();

//筛选表单对应数据接口
interface FormState {
  projectName: string;
  projectDate: [dayjs.Dayjs, dayjs.Dayjs];
}
//筛选标签宽度
const labelCol = { style: { width: '90px' } };
//筛选表单对应数据
const formState = reactive<FormState>({
  projectName: '',
  projectDate: undefined
});

//筛选表单Ref
const formRef = ref<FormInstance>();
//项目表格数据与加载状态
const projects = ref([]);
const loading = ref(true);
//提交筛选内容
const onSubmit = () => {
  init(1);
};
//清空筛选框内容
const resetForm = () => {
  formRef.value.resetFields();
  init(1);
};

const init = (current: number) => {
  loading.value = true;
  let timeArray = null;
  if (formState.projectDate != undefined) {
    timeArray = formState.projectDate.map((date) => date.valueOf());
    console.log(timeArray.join(','));
  }
  projectDao
    .findProjects(
      store.getters.userId,
      formState.projectName,
      projectTyep.value,
      null,
      timeArray,
      current - 1,
      pageSizeRef.value
    )
    .then((result) => {
      projects.value = result.data.data.rows;
      total.value = result.data.data.totalCount;
      loading.value = false;
    })
    .catch((error) => {
      console.log('findProjects error' + error);
      loading.value = false;
    });
};

//挂载页面数据
onMounted(() => {
  init(1);
});
</script>

<style scoped>
.head {
  display: flex;
  flex-direction: column;
  padding: 1.5%;
  margin: 1%;
  height: auto;
  /* 使容器高度为视口高度 */
  max-width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border: 1px solid lightgray;
  border-radius: 10px;
  background-color: #fff;
  overflow: auto;
}

.body {
  display: flex;
  flex-direction: column;
  padding: 1.5%;
  margin: 1%;
  height: 85%;
  /* 使容器高度为视口高度 */
  max-width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border: 1px solid lightgray;
  border-radius: 10px;
  background-color: #fff;
  overflow: auto;
}

.filter {
  padding: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filter-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  width: 75%;
}

.filter-buttons {
  display: flex;
  justify-content: space-between;
  width: 180px;
}

.pagination {
  text-align: center;
  bottom: 0%;
  margin-top: 1%;
}
</style>
